<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入样式表 -->
    <link rel="stylesheet" href="./assets/news.css" />
  </head>

  <body>
    <!-- 新闻列表 -->
    <div id="news-list">
    
      
    </div>

  <script src="./lib/axios.js"></script>
  <script>
    const lists=document.querySelector('#news-list')
    // axios.get('http://ajax-api.itheima.net/api/news').then(({data:res})=>{
    //   const {data}=res
    //   lists.innerHTML=data.map((item)=>{
    //     return `<div class="news-item">
    //     <img
    //       class="thumb"
    //       src="${item.img}"
    //       alt=""
    //     />
    //     <div class="right-box">
    //       <!-- 新闻标题 -->
    //       <h1 class="title">${item.title}</h1>
    //       <div class="footer">
    //         <div>
    //           <!-- 新闻来源 -->
    //           <span>${item.source}</span>&nbsp;&nbsp;
    //           <!-- 发布日期 -->
    //           <span>${item.time}</span>
    //         </div>
    //         <!-- 评论数量 -->
    //         <span>评论数：${item.cmtcount}</span>
    //       </div>
    //     </div>
    //   </div>`
    //   }).join('')
    // })
    const renderBody=async ()=>{
      const{data:res}=await axios.get('http://ajax-api.itheima.net/api/news')
       const{data}=res
       console.log(data);
       lists.innerHTML=data.map(item=>{
        return `<div class="news-item">
       <img
          class="thumb"
          src="${item.img}"
         alt=""
      />
     <div class="right-box">
          <!-- 新闻标题 -->
          <h1 class="title">${item.title}</h1>
           <div class="footer">
           <div>
               <!-- 新闻来源 -->
              <span>${item.source}</span>&nbsp;&nbsp;
               <!-- 发布日期 -->
               <span>${item.time}</span>
             </div>
             <!-- 评论数量 -->
             <span>评论数：${item.cmtcount}</span>
           </div>
         </div>
       </div>`
       }).join('')
    }
    renderBody()
  </script>
  </body>
</html>
